<!---->
<template>
  <div class="detail">
    <div class="title">
        <div class="tl">{{detail.title}}</div>
        <!-- <div class="tr"><i class="el-icon-star-off"></i></div> -->
    </div>
    <div class="message">
      <div>
        <span>{{detail.author}}</span>
        <span>{{detail.createtime}}</span>
        <span><i class="el-icon-view">222</i></span>
        <span class="colect"><i class="el-icon-star-on">{{'  收藏  '+detail.collect}}</i></span>
      </div>
      <div>
        <span>分类：</span>
        <span style="color: #5094d5;">{{detail.categroy}}</span>
      </div>
    </div>
    <div class="context">
      <div v-html="detail.content"></div>
    </div>
    <div class="recall">
      <div class="form_content">
        <div class="form_l">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </div>
        <div class="form_c">
          <textarea name="comment_content" :class="commentActive?'open comment_content':'comment_content'" id="comment_content" placeholder="请发表评价" maxlength="1000" @focus="comment()" @blur="cancelComment()"></textarea>
        </div>
        <div class="form_r">
          <el-button type="primary">发表评论</el-button>
        </div>
      </div>
    </div>
    <div class="comment">
      <div class="form_content" v-for="i in 10" :key="i">
      <div class="form_l">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          <span>作者：</span>
        </div>
        <div class="form_c">
          <span>这篇文章写得很好</span>
        </div>
        <div class="form_r" @click="recall()">
          <span>回复</span>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import<组件名字> from '<组件路径>';

export default {
  //import引入的组件需要注入对象中才能用
  components: {},
  data() {
    return {
      detail:{},
      form: {
          desc: ''
        },
        commentActive:0
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    comment(){
      this.commentActive = 1
    },
    cancelComment(){
      this.commentActive = 0
    },
    recall(){
      if(!sessionStorage.getItem('user')){
        this.$confirm('请先登录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.push('/login')
          }).catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除'
            // });          
          });
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  //生命周期-挂载完成（可以访问DOM元素）
  mounted() {
    this.detail = this.$route.query
    console.log('博客详情',this.$route.query)
  },
  beforeCreate() {}, //生命周期-创建之前
  beforeMount() {}, //生命周期-挂载之前
  beforeUpdate() {}, //生命周期-更新之前
  updated() {}, //生命周期-更新之后
  beforeDestroy() {}, //生命周期-销毁之前
  destroyed() {}, //生命周期-销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个会输会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类

.detail {
  margin:0 auto;
  display: flex;
  flex-direction: column;
  width:1000px;
  padding: 20px;
  // border:1px solid #ccc;
  // height:100%;
  margin-bottom:20px;
  .title {
      display: flex;
      justify-content: space-between;
    .tl{
        font-size: 28px;
        font-weight: bold;
    }
    .tr{
        font-size: 20px;
    }
  }
  .message {
    color: #999aaa;
    background: #f8f8f8;
    border-radius: 4px;
    line-height: 30px;
    margin-top: 10px;
    div {
      span {
        padding: 0 10px;
      }
      .colect{
        cursor: pointer;
        :hover{
          color: #fc5531;
        }
        
      }
    }
  }
  .context{
      margin-top:30px;
      line-height: 25px;
  }
  .recall{
    margin-top:20px;
    .form_content{
      display: flex;
      align-items: center;
      .form_c{
        flex: 1;
        margin:0 10px;
        .comment_content{
          display: block;
          width: 100%;
          flex: 1;
          padding: 6px 8px;
          background: rgba(248,249,251,0.8);
          border: 1px solid #dadde0;
          border-radius: 4px;
          resize: none;
          height: 36px;
          font-size: 14px;
          line-height: 22px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          -webkit-transition: height .3s ease-in-out;
          transition: height .3s ease-in-out;
          font-family: "SF Pro Display",Roboto,Noto,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
          outline: none;
        }
        .open{
              height: 64px;
              background-color: #fff;
              box-shadow: 0 0 6px 0 #5094d5;
              border: 1px solid #5094d5;
        }
      }
      
    }
  }
  .comment{
    .form_content{
      display: flex;
      align-items: center;
      .form_l{
        display: flex;
        align-items: center;
      }
      .form_c{
        flex: 1;
        margin:0 10px;
      }
      .form_r{
        cursor: pointer;
        color: #5893c2;
        :hover{
            color: #fc5531;
        }
      }
    }
  }
}
.el-button{
  padding:10px 20px !important;
}
</style>